<template>
	<view class="content">
		<view class="hei20"></view>
		<view class="wid90 mar bacFFF borRad20">
			<view style="height: 44rpx;"></view>
			<!-- <button v-if="!userInfo" @getphonenumber="getWechatMobile" open-type="getPhoneNumber" 
				class="wid87 mar dis disAl bacFFF">
				<image :src="url+'/addon/qianyu_petrol/wxapp/image/header.png'" class="borRad50"
					style="width: 132rpx;height: 132rpx;"></image>
				<view class="fowe600 foSi45 dis disAl" style="margin-left: 36rpx;">点击登录</view>
			</button> -->
			<button v-if="!userInfo" @click="getUserInfo"
				class="wid87 mar dis disAl bacFFF">
				<image :src="url+'/addon/qianyu_petrol/wxapp/image/header.png'" class="borRad50"
					style="width: 132rpx;height: 132rpx;"></image>
				<view class="fowe600 foSi45 dis disAl" style="margin-left: 36rpx;">点击登录</view>
			</button>
			<view v-if="userInfo" class="wid87 mar dis disAl" @click="tiaozhuan('/pages/wode/install')">
				<image v-if="userInfo.avatar" :src="url+userInfo.avatar" class="borRad50"
					style="width: 132rpx;height: 132rpx;"></image>
				<image v-if="!userInfo.avatar" :src="url+'/addon/qianyu_petrol/wxapp/image/header.png'" class="borRad50"
					style="width: 132rpx;height: 132rpx;"></image>
				<view style="margin-left: 36rpx;">
					<view class="fowe600 foSi45">{{userInfo.nickname?userInfo.nickname:'点击登录'}}</view>
					<view class=" foSi25 " style="color: #A0A0A0;">{{userInfo.level_name}}
						成长值{{userInfo.development}}/{{userInfo.developmentend}}</view>
					<view class="mar-top10 foSi25 " style="color: #7E7E7E;">{{userInfo.card}}</view>
				</view>
			</view>
			<view class="dis" style="margin-top: 50rpx;">
				<view class="textCen" style="width: 33.33%;" @click="tiaozhuan('/pages/index/activity')">
					<view class="foSi30">{{userInfo.money?userInfo.money:0}}</view>
					<view class="foSi25 mar-top10" style="color: #727272;">钱包</view>
				</view>
				<view class="textCen" style="width: 33.33%;" @click="tiaozhuan('/pages/store/store')">
					<view class="foSi30">{{userInfo.integral?userInfo.integral:0}}</view>
					<view class="foSi25 mar-top10" style="color: #727272;">积分</view>
				</view>
				<view class="textCen" style="width: 33.33%;" @click="tiaozhuan('/pages/wode/getACoupon')">
					<view class="foSi30">{{userInfo.coupon_log_count?userInfo.coupon_log_count:0}}</view>
					<view class="foSi25 mar-top10" style="color: #727272;">优惠券</view>
				</view>
			</view>
			<view style="height: 40rpx;"></view>
		</view>
		<view style="height: 54rpx;"></view>
		<view class="wid90 mar borRad20" style="background-color: #458EFD;">
			<view class="wid90 mar hei87 dis disAl foSi35 coFFF fowe600">会员服务</view>
			<view class="wid95 mar borRad20 bacFFF" style="padding: 10rpx 0;">
				<view class="wid90 mar hei80 dis disAl disJuB" @click="tiaozhuan('/pages/order/order')">
					<view class="dis disAl">
						<image src="../../static/dingdan.png" style="width: 29rpx;height: 28rpx;"></image>
						<view class="foSi30 fowe600 mar-left20">我的订单</view>
					</view>
					<image src="../../static/jin.png" style="width: 13.1rpx;height: 22.7rpx;"></image>
				</view>
				<view class="wid90 mar hei80 dis disAl disJuB" @click="tiaozhuan('/pages/store/exchange?biaoji=1')">
					<view class="dis disAl">
						<image src="../../static/duihuan.png" style="width: 29rpx;height: 28rpx;"></image>
						<view class="foSi30 fowe600 mar-left20">我的兑换</view>
					</view>
					<image src="../../static/jin.png" style="width: 13.1rpx;height: 22.7rpx;"></image>
				</view>
				<button v-if="userInfo" hover-class="none" class="wid90 mar hei80 dis disAl disJuB bacFFF" open-type="share">
					<view class="dis disAl">
						<image src="../../static/fenxiang.png" style="width: 29rpx;height: 28rpx;"></image>
						<view class="foSi30 fowe600 mar-left20">分享好友</view>
					</view>
					<image src="../../static/jin.png" style="width: 13.1rpx;height: 22.7rpx;"></image>
				</button>
				<view class="wid90 mar hei80 dis disAl disJuB" @click="tiaozhuan('/pages/wode/member')">
					<view class="dis disAl">
						<image src="../../static/dianpu.png" style="width: 29rpx;height: 28rpx;"></image>
						<view class="foSi30 fowe600 mar-left20">会员权益</view>
					</view>
					<image src="../../static/jin.png" style="width: 13.1rpx;height: 22.7rpx;"></image>
				</view>
				<!-- @click="tiaozhuan('/pages/wode/member')" -->
				<button class="wid90 mar hei80 dis disAl disJuB bacFFF" open-type="contact" >
					<view class="dis disAl">
						<image src="../../static/kefu.png" style="width: 29rpx;height: 28rpx;"></image>
						<view class="foSi30 fowe600 mar-left20">联系客服</view>
					</view>
					<image src="../../static/jin.png" style="width: 13.1rpx;height: 22.7rpx;"></image>
				</button>
				<view class="wid90 mar hei80 dis disAl disJuB" @click="tiaozhuan('/pages/wode/install')">
					<view class="dis disAl">
						<image src="../../static/shezhi.png" style="width: 29rpx;height: 28rpx;"></image>
						<view class="foSi30 fowe600 mar-left20">设置</view>
					</view>
					<image src="../../static/jin.png" style="width: 13.1rpx;height: 22.7rpx;"></image>
				</view>
				<view class="wid90 mar hei80 dis disAl disJuB" @click="tiaozhuan('/pages/shop/shop')">
					<view class="dis disAl">
						<image src="../../static/dianpu.png" style="width: 29rpx;height: 28rpx;"></image>
						<view class="foSi30 fowe600 mar-left20">店铺管理</view>
					</view>
					<image src="../../static/jin.png" style="width: 13.1rpx;height: 22.7rpx;"></image>
				</view>
			</view>
			<view class="hei20"></view>
		</view>
		<uni-popup ref="popup" background-color="#fff" type="bottom" border-radius="10px 10px 0 0">
			<view class="wid90 mar">
				<view class="hei20"></view>
				<view class="dis disAl">
					<image :src="url+'/addon/qianyu_petrol/wxapp/image/tu2.png'" class="borRad50" style="width: 50rpx;height: 50rpx;"></image>
					<view class="mar-left20 fowe600 foSi30"> 申请</view>
				</view>
				<view class="mar-top40 fowe600 foSi30">获取您的头像、昵称、手机号</view>
				<view class="wid100 dis disAl mar-top30" style="height: 100rpx;">
					<view class="fowe600 foSi25" style="width: 20%;">头像</view>
					<button hover-class="none" type="balanced" class="dis disAl disJuB bacFFF wid80"
					open-type="chooseAvatar" @chooseavatar="onChooseavatar">
						<image v-if="avatar" :src="url+avatar" class="borRad50" style="width: 80rpx;height: 80rpx;">
						</image>
						<image v-if="!avatar" :src="url+'/addon/qianyu_petrol/wxapp/image/header.png'" class="borRad50"
							style="width: 80rpx;height: 80rpx;"></image>
						<uni-icons type="right" size="30rpx"></uni-icons>
					</button>
				</view>
				<view class="xia"></view>
				<view class="wid100 dis disAl" style="height: 100rpx;">
					<view class="fowe600 foSi25" style="width: 20%;">昵称</view>
					<input type="nickname" class="wid80 foSi25" v-model="name" @change="namChange" placeholder="点击填写" />
				</view>
				<view class="xia"></view>
				<view class="wid100 dis disAl" style="height: 100rpx;">
					<view class="fowe600 foSi25" style="width: 20%;">手机号</view>
					<button v-if="!mobile" @getphonenumber="getWechatMobile" open-type="getPhoneNumber"
						class="hei80 dis disAl bacFFF foSi25 wid80">点击授权</button>
					<view v-if="mobile" class="hei80 dis disAl bacFFF foSi25 wid80">{{mobile}}</view>
				</view>
				<view class="xia"></view>
				<view class="hei80 mar-top40 dis disAl disJuC foSi30 borRad10" @click="denglu()"
					style="background-color: #E5EEFF;color: #035DFF;">允许</view>
				<view class="hei80 mar-top20 dis disAl disJuC foSi30" @click="close()">拒绝</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				userInfo: '',
				avatar: '',
				name: '',
				mobile: '',
			}
		},
		onLoad() {},
		onShow() {
			var that = this
			if(!uni.getStorageSync('token')){
				that.userInfo = ''
			}else{
				that.getUserInfo()
			}
		},
		// 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
		onShareAppMessage(res) {
			var that = this;
			var userinfo = uni.getStorageSync('userinfo')
			var imageUrl = this.url + '/addon/qianyu_petrol/wxapp/image/header.png'
			
			if(userinfo.avatar){
				imageUrl = this.url+userinfo.avatar
			}
			that.dingyue()
			return {
				title: '首页',
				path: '/pages/index/index?parent_id=' + userinfo.id,
				imageUrl: imageUrl
			}
		},
		methods: {
			getUserInfo() {
				var that = this;
				var nickname = uni.getStorageSync('userinfo').nickname
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_userlogin',
					method: "GET",
					header: {
						'site-id': that.global.site_id //自定义请求头信息
					},
					data: {
						openid: uni.getStorageSync('openid')
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							uni.setStorageSync('userinfo', result.data);
							uni.setStorageSync('token', result.data.token);
							that.userInfo = result.data
						}else{
							that.$refs.popup.open()
						}
					}
				})
			},
			dingyue() {
				var that = this
				// 要检查的订阅id
				let id = uni.getStorageSync('tzId').invite_success_template
				let id1 = uni.getStorageSync('tzId').reward_received_template
				// 这里是获取下发权限地方，根据官方文档，可以根据  wx.getSetting() 的 withSubscriptions   这个参数获取用户是否打开订阅消息总开关。后面我们需要获取用户是否同意总是同意消息推送。所以这里要给它设置为true 。
				wx.getSetting({
					withSubscriptions: true, //  这里设置为true,下面才会返回mainSwitch
					success: function(res) {
						// 调起授权界面弹窗
						// if (res.subscriptionsSetting.mainSwitch) { // 用户打开了订阅消息总开关
						// 	if (res.subscriptionsSetting.itemSettings == null) {
								// 当用户没有点击 ’总是保持以上选择，不再询问‘  按钮。那每次执到这都会拉起授权弹窗
								wx.showModal({
									title: '提示',
									content: '请授权开通服务通知',
									showCancel: true,
									success: function(ress) {
										if (ress.confirm) {
											wx.requestSubscribeMessage({ // 调起消息订阅界面
												tmplIds: [id,id1],
												success(res) {
													console.log('订阅消息 成功 ');
													console.log(res);
												},
												fail(er) {
													console.log("订阅消息 失败 ");
													console.log(er);
												}
											})
										}
									}
								})
						// 	}
						// }
					},
					fail: function(error) {
						console.log(error);
					},
				})
			},
			//选择头像
			onChooseavatar(e) {
				var that = this
				console.log(e.detail);
				that.shangchuan(e.detail.avatarUrl)
			},
			namChange(res){
				this.name = res.detail.value
			},
			close() {
				this.$refs.popup.close()
			},
			denglu(){
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_userlogin',
					method: 'GET',
					header: {
						'site-id': that.global.site_id,
					},
					data: {
						'avatar': that.avatar,
						'nickname': that.name?that.name:'默认用户',
						'mobile': that.mobile,
						'openid': uni.getStorageSync('openid'),
						'parent_id' : uni.getStorageSync('parent_id')
					},
					complete: function() {
						uni.hideLoading();
					},
					success: function(result) {
						var apiResult = result.data;
						if (apiResult.code == 1) {
							uni.setStorageSync('userinfo', apiResult.data);
							uni.setStorageSync('token', apiResult.data.token);
							that.userInfo = apiResult.data
						}else{
							uni.showToast({
								title: apiResult.msg,
								icon: 'error',
								duration: 2000
							})
						}
						that.$refs.popup.close()
					}
				});
			},
			shangchuan(tempFilePaths) {
				var that = this
				uni.uploadFile({
					url: that.global.url + '/api/qianyu_petrol/gasstation_common_image',
					header: {
						'site-id': that.global.site_id,
						"token": uni.getStorageSync('token'),
					}, //请求token	
					filePath: tempFilePaths,
					name: 'file',
					success: (res) => {
						var apiresult = JSON.parse(res.data)
						if (apiresult.code == 1) {
							console.log(apiresult.data.url);
							that.avatar = apiresult.data.url;
						} else {
							uni.showToast({
								title: apiresult.msg,
								icon: 'error',
								duration: 2000
							})
						}
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon: 'error',
							duration: 2000
						})
					}
				});
			},
			getWechatMobile(e) {
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_getphone',
					method: 'GET',
					header: {
						'site-id': that.global.site_id,
					},
					data: {
						'code': e.detail.code
					},
					complete: function() {
						uni.hideLoading();
					},
					success: function(result) {
						var apiResult = result.data;
						if (apiResult.code == 1) {
							that.mobile = apiResult.data
						}
					}
				});
			},
			tiaozhuan(url) {
				if (uni.getStorageSync('yuan_userinfo') && url == '/pages/shop/shop') {
					url = '/pages/shop/workbench'
				}
				if(!uni.getStorageSync('userinfo')){
					this.getUserInfo()
				}else{
					uni.navigateTo({
						url: url
					})
				}
			}
		}
	}
</script>

<style>
	.content {
		background: linear-gradient(#E4F7FD 20%, #F8F9FD 80%);
		min-height: 100vh;
	}
	.xia{
		height: 1rpx;
		background-color: #D2D2D2;
	}
</style>